Thinking and Designing Tech and UXD Together: Tech-telmechtel with UX and Web Design [Interview]

Tech-telmechtel is back. The break was long, but the comeback is all the more powerful. Not only are we celebrating our tenth Tech-telmechtel episode, but we are also bringing you the first Tech-telmechtel interview with two guests at once. OK, let us focus on one thing at a time: the 10th Tech-telmechtel interview. 2 experts. 2 parts. Today, we have part one for you.

What can you expect? First-class know-how, honest answers and numerous learnings from UX and web design practice by our young seniors Josephine Gutschner and Carsten Behr. They will be called Josi and CC from now on. In numerous projects, Conversion Carsten ? and Josi have accompanied renowned clients on their way to an ideal user experience. These clients include: myAGRAR, PERI, BADER, Porsche, PRECITOOL, Netto Digital and TROX.

We start the first part of our double feature with design and usability requirements (on both sides: users and designers) and we also look at the fusion of DEV and UXD for good user experiences and successful e-commerce. The second part of the Tech-telmechtel will be about current web design trends and who they are suitable for (but also who they are not suitable for). Until then, we have a new series of articles coming up. Yes, there is a lot going on today and in the coming weeks.

Tech and UXD Impersonalised: Interview with Carsten Behr and Josephine Gutschner

Josi and Carsten, tell me: what do you do at dotSource?

CC:
My focus is on concept creation, prototyping and conversion optimisation. Besides that, I also work as a Magento front-end developer for our client Mövenpick Wein.

Josi:
I’m responsible for everything visual. I take care of the concept creation and specification when assessing the current situation and requirements. Afterwards, I implement the design.

At the start and in the concept creation phase, including wireframing, Carsten and I/our colleagues from the UX and usability delivery team work together. In the design process, Carsten then takes a short break before he takes the lead after the launch.

Tech and UXD Hand in Hand: Wireframing Quick & Dirty

You just mentioned wireframing. What exactly does that mean?

CC:
Wireframes are a basic framework for creating an extremely rough structure of a page. Let me give you an example: a slider at the top, followed by teaser elements, products, SEO text and a footer.

Initially, it’s only about positioning content. In other words: we go from a rough sketch down to the nitty-gritty. When selecting a shop system, there are often already certain guidelines.

Speaking of guidelines: what else do you have to pay attention to? In wireframing and beyond?

CC:
Three crucial things are relevant here:

1. User needs
2. Business needs
3. Technical restrictions

Imagine these three things in three circles that overlap.

We as UX designers have to design the shop or the website that’s precisely in the sweet spot, i.e. the intersection of these three factors.

Josi:
You also have to know the pitfalls that come with certain systems. When a client says that they want to have a version that is close to the standard, you have to know what that means.

Tech and UXD: Sharing Knowledge Is Power and Ensures Good User Experience

So you’re not just UX designers, but also shop system experts?

Josi:
We certainly have experts for shop systems at dotSource. We’re in the lucky position that knowledge is shared here and that we can acquire the system knowledge that is relevant to us in intensive exchange with our developers and on overview pages.

Do you have any examples of the pitfalls mentioned earlier?

CC:
Checkouts are a good example. Some shop systems don’t give you too much wiggle room. Here’s an example: if the client wants four steps to make it easy for his customers, predefined checkouts, which consist of only one big step, reach their limits.

It’s possible to redesign the process in order to visually depict the four desired steps, but from a purely technical point of view, this would require efforts that have not been agreed upon at all.

Josi:
By the way, this is not always the best approach from a usability perspective either. This makes it all the more important to respond honestly to clients’ wishes. In our example, this would mean: if you want to stay close to the standard version, the usability may suffer.

Tech and UXD: B2B vs B2C

Can you talk a bit more about wireframes in B2B?

CC:
To put it very bluntly: B2B wireframes are mainly driven by product data. It’s less about images, emotions and consumer psychology, but more about clearly presenting sales information and product data.

It has to be efficient, it has to be fast. Users who move on B2B platforms are B2C platform users. If a product is presented in an inferior way, users will remember it negatively.

Nevertheless, the developments of the last five years have shown that images and emotions are also playing an increasingly important role in B2B. What’s your opinion on that?

Josi:
It’s a mix of both. Of course, content commerce is becoming increasingly prevalent in B2B. In B2B, however, information must be presented more quickly. You leave out all the gimmicks, so to speak, and present things in an information-driven way.

CC:
In my mind, B2B is a pimped B2C shop. You have all the features that a B2C shop offers – and even more. You have shopping cart management and employee management features, for example. Everything’s just very service-driven. The challenge is to present everything within the same framework.

Josi:
You have to combine two things: how do I attract users (emotionally) while quickly providing them with the information they need?

Tech and UX: Optimisation Thanks to Audits

How do you check websites or shop pages when clients approach you with the request to optimise their UX?

CC:
We carry out UX and design audits. An expert takes a look at the website and checks it for common conventions and good usability.

We have a huge list of heuristics. You can think of it like a checklist.

Josi:
It includes some very trivial things, for example whether the logo is part of the header and whether it’s linked to the homepage. Although it may seem trivial, that’s what users expect.

Do you have any more examples of things that are mentioned on this checklist?

Josi:
Yes, compliance with CI colours, for example, or uniformity in terms of button colours. Or:

– Are headlines presented correctly?
– Is the spacing of the text between the headlines right?

CC:
It’s all about the overall impression. When carrying out a UX audit, we look at the following questions:

– What’s behind your brand?
– Where else is your brand present? Do you have flyers, catalogues, display advertising or TV advertising? And does all of this offer a consistent user experience?
– Does your website even reflect your character/your brand image?

Tech and UX: Heuristics and Dialogue Principles

Where do heuristics come from? Who determines what’s standard?

CC:
Heuristics are best practices of general competitor analysis from the industry combined with various standards and principles, for example coming from the ISO standard.

This includes, for example, seven dialogue principles that provide guidelines on how a system should communicate with users. Heuristics are based on these ISO standards. It’s all very much influenced by e-commerce.

Josi:
One example is compliance with expectations. We talked about this at the beginning, when we mentioned the logo in the top left corner, which has to be clickable and links back to the homepage.
Then there are also Gestalt laws – they have developed over decades. The law of proximity is one of them. It says that proper spacing between headline and body text creates unity or that the style of presentation determines where an element ends.

Thank you very much to both of you. That’s it for today.

CC:
Josi:
Our pleasure. It was fun.